
<!doctype html>
<html lang="zh" class="no-js">
  <head>
    
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width,initial-scale=1">
      
        <meta name="description" content="html学习笔记">
      
      
        <meta name="author" content="wanwusangzhi">
      
      
        <link rel="canonical" href="https://html.wiki.wanwusangzhi.top/1intro/introduction/">
      
      
        <link rel="prev" href="../">
      
      
      
      <link rel="icon" href="/favicon.jpg">
      <meta name="generator" content="mkdocs-1.6.1, mkdocs-material-9.5.42">
    
    
      
        <title>1.1   简介 - html</title>
      
    
    
      <link rel="stylesheet" href="../../assets/stylesheets/main.0253249f.min.css">
      
        
        <link rel="stylesheet" href="../../assets/stylesheets/palette.06af60db.min.css">
      
      


    
    
      
    
    
      
        
        
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Noto+Sans+SC:300,300i,400,400i,700,700i%7CFira+Code:400,400i,700,700i&display=fallback">
        <style>:root{--md-text-font:"Noto Sans SC";--md-code-font:"Fira Code"}</style>
      
    
    
    <script>__md_scope=new URL("../..",location),__md_hash=e=>[...e].reduce(((e,_)=>(e<<5)-e+_.charCodeAt(0)),0),__md_get=(e,_=localStorage,t=__md_scope)=>JSON.parse(_.getItem(t.pathname+"."+e)),__md_set=(e,_,t=localStorage,a=__md_scope)=>{try{t.setItem(a.pathname+"."+e,JSON.stringify(_))}catch(e){}}</script>
    
      

    
    
    
   <link href="../../assets/stylesheets/glightbox.min.css" rel="stylesheet"/><style>
    html.glightbox-open { overflow: initial; height: 100%; }
    .gslide-title { margin-top: 0px; user-select: text; }
    .gslide-desc { color: #666; user-select: text; }
    .gslide-image img { background: white; }
    .gscrollbar-fixer { padding-right: 15px; }
    .gdesc-inner { font-size: 0.75rem; }
    body[data-md-color-scheme="slate"] .gdesc-inner { background: var(--md-default-bg-color);}
    body[data-md-color-scheme="slate"] .gslide-title { color: var(--md-default-fg-color);}
    body[data-md-color-scheme="slate"] .gslide-desc { color: var(--md-default-fg-color);}</style> <script src="../../assets/javascripts/glightbox.min.js"></script></head>
  
  
    
    
      
    
    
    
    
    <body dir="ltr" data-md-color-scheme="default" data-md-color-primary="white" data-md-color-accent="teal">
  
    
    <input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off">
    <input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
    <label class="md-overlay" for="__drawer"></label>
    <div data-md-component="skip">
      
        
        <a href="#_1" class="md-skip">
          跳转至
        </a>
      
    </div>
    <div data-md-component="announce">
      
    </div>
    
    
      

<header class="md-header" data-md-component="header">
  <nav class="md-header__inner md-grid" aria-label="页眉">
    <a href="../.." title="html" class="md-header__button md-logo" aria-label="html" data-md-component="logo">
      
  <img src="/icon.svg" alt="logo">

    </a>
    <label class="md-header__button md-icon" for="__drawer">
      
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"/></svg>
    </label>
    <div class="md-header__title" data-md-component="header-title">
      <div class="md-header__ellipsis">
        <div class="md-header__topic">
          <span class="md-ellipsis">
            html
          </span>
        </div>
        <div class="md-header__topic" data-md-component="header-topic">
          <span class="md-ellipsis">
            
              1.1 &nbsp; 简介
            
          </span>
        </div>
      </div>
    </div>
    
      
        <form class="md-header__option" data-md-component="palette">
  
    
    
    
    <input class="md-option" data-md-color-media="" data-md-color-scheme="default" data-md-color-primary="white" data-md-color-accent="teal"  aria-label="深色模式"  type="radio" name="__palette" id="__palette_0">
    
      <label class="md-header__button md-icon" title="深色模式" for="__palette_1" hidden>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7.5 2c-1.79 1.15-3 3.18-3 5.5s1.21 4.35 3.03 5.5C4.46 13 2 10.54 2 7.5A5.5 5.5 0 0 1 7.5 2m11.57 1.5 1.43 1.43L4.93 20.5 3.5 19.07zm-6.18 2.43L11.41 5 9.97 6l.42-1.7L9 3.24l1.75-.12.58-1.65L12 3.1l1.73.03-1.35 1.13zm-3.3 3.61-1.16-.73-1.12.78.34-1.32-1.09-.83 1.36-.09.45-1.29.51 1.27 1.36.03-1.05.87zM19 13.5a5.5 5.5 0 0 1-5.5 5.5c-1.22 0-2.35-.4-3.26-1.07l7.69-7.69c.67.91 1.07 2.04 1.07 3.26m-4.4 6.58 2.77-1.15-.24 3.35zm4.33-2.7 1.15-2.77 2.2 2.54zm1.15-4.96-1.14-2.78 3.34.24zM9.63 18.93l2.77 1.15-2.53 2.19z"/></svg>
      </label>
    
  
    
    
    
    <input class="md-option" data-md-color-media="" data-md-color-scheme="slate" data-md-color-primary="black" data-md-color-accent="teal"  aria-label="浅色模式"  type="radio" name="__palette" id="__palette_1">
    
      <label class="md-header__button md-icon" title="浅色模式" for="__palette_0" hidden>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7.5 2c-1.79 1.15-3 3.18-3 5.5s1.21 4.35 3.03 5.5C4.46 13 2 10.54 2 7.5A5.5 5.5 0 0 1 7.5 2m11.57 1.5 1.43 1.43L4.93 20.5 3.5 19.07zm-6.18 2.43L11.41 5 9.97 6l.42-1.7L9 3.24l1.75-.12.58-1.65L12 3.1l1.73.03-1.35 1.13zm-3.3 3.61-1.16-.73-1.12.78.34-1.32-1.09-.83 1.36-.09.45-1.29.51 1.27 1.36.03-1.05.87zM19 13.5a5.5 5.5 0 0 1-5.5 5.5c-1.22 0-2.35-.4-3.26-1.07l7.69-7.69c.67.91 1.07 2.04 1.07 3.26m-4.4 6.58 2.77-1.15-.24 3.35zm4.33-2.7 1.15-2.77 2.2 2.54zm1.15-4.96-1.14-2.78 3.34.24zM9.63 18.93l2.77 1.15-2.53 2.19z"/></svg>
      </label>
    
  
</form>
      
    
    
      <script>var palette=__md_get("__palette");if(palette&&palette.color){if("(prefers-color-scheme)"===palette.color.media){var media=matchMedia("(prefers-color-scheme: light)"),input=document.querySelector(media.matches?"[data-md-color-media='(prefers-color-scheme: light)']":"[data-md-color-media='(prefers-color-scheme: dark)']");palette.color.media=input.getAttribute("data-md-color-media"),palette.color.scheme=input.getAttribute("data-md-color-scheme"),palette.color.primary=input.getAttribute("data-md-color-primary"),palette.color.accent=input.getAttribute("data-md-color-accent")}for(var[key,value]of Object.entries(palette.color))document.body.setAttribute("data-md-color-"+key,value)}</script>
    
    
    
      <label class="md-header__button md-icon" for="__search">
        
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.52 6.52 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5"/></svg>
      </label>
      <div class="md-search" data-md-component="search" role="dialog">
  <label class="md-search__overlay" for="__search"></label>
  <div class="md-search__inner" role="search">
    <form class="md-search__form" name="search">
      <input type="text" class="md-search__input" name="query" aria-label="搜索" placeholder="搜索" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="search-query" required>
      <label class="md-search__icon md-icon" for="__search">
        
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.52 6.52 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5"/></svg>
        
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11z"/></svg>
      </label>
      <nav class="md-search__options" aria-label="查找">
        
          <a href="javascript:void(0)" class="md-search__icon md-icon" title="分享" aria-label="分享" data-clipboard data-clipboard-text="" data-md-component="search-share" tabindex="-1">
            
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81a3 3 0 0 0 3-3 3 3 0 0 0-3-3 3 3 0 0 0-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9a3 3 0 0 0-3 3 3 3 0 0 0 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.15c-.05.21-.08.43-.08.66 0 1.61 1.31 2.91 2.92 2.91s2.92-1.3 2.92-2.91A2.92 2.92 0 0 0 18 16.08"/></svg>
          </a>
        
        <button type="reset" class="md-search__icon md-icon" title="清空当前内容" aria-label="清空当前内容" tabindex="-1">
          
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>
        </button>
      </nav>
      
        <div class="md-search__suggest" data-md-component="search-suggest"></div>
      
    </form>
    <div class="md-search__output">
      <div class="md-search__scrollwrap" tabindex="0" data-md-scrollfix>
        <div class="md-search-result" data-md-component="search-result">
          <div class="md-search-result__meta">
            正在初始化搜索引擎
          </div>
          <ol class="md-search-result__list" role="presentation"></ol>
        </div>
      </div>
    </div>
  </div>
</div>
    
    
      <div class="md-header__source">
        <a href="https://github.com/pymanim/htmlwiki" title="前往仓库" class="md-source" data-md-component="source">
  <div class="md-source__icon md-icon">
    
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><!--! Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6m-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3m44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9M244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8M97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1m-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7m32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1m-11.4-14.7c-1.6 1-1.6 3.6 0 5.9s4.3 3.3 5.6 2.3c1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2"/></svg>
  </div>
  <div class="md-source__repository">
    pymanim/htmlwiki
  </div>
</a>
      </div>
    
  </nav>
  
</header>
    
    <div class="md-container" data-md-component="container">
      
      
        
          
            
<nav class="md-tabs" aria-label="标签" data-md-component="tabs">
  <div class="md-grid">
    <ul class="md-tabs__list">
      
        
  
  
  
    <li class="md-tabs__item">
      <a href="../.." class="md-tabs__link">
        
  
    
  
  简介

      </a>
    </li>
  

      
        
  
  
  
    
    
      <li class="md-tabs__item">
        <a href="../../0pre/" class="md-tabs__link">
          
  
    
  
  序

        </a>
      </li>
    
  

      
        
  
  
    
  
  
    
    
      <li class="md-tabs__item md-tabs__item--active">
        <a href="../" class="md-tabs__link">
          
  
    
  
  html简介

        </a>
      </li>
    
  

      
    </ul>
  </div>
</nav>
          
        
      
      <main class="md-main" data-md-component="main">
        <div class="md-main__inner md-grid">
          
            
              
              <div class="md-sidebar md-sidebar--primary" data-md-component="sidebar" data-md-type="navigation" >
                <div class="md-sidebar__scrollwrap">
                  <div class="md-sidebar__inner">
                    


  


<nav class="md-nav md-nav--primary md-nav--lifted" aria-label="导航栏" data-md-level="0">
  <label class="md-nav__title" for="__drawer">
    <a href="../.." title="html" class="md-nav__button md-logo" aria-label="html" data-md-component="logo">
      
  <img src="/icon.svg" alt="logo">

    </a>
    html
  </label>
  
    <div class="md-nav__source">
      <a href="https://github.com/pymanim/htmlwiki" title="前往仓库" class="md-source" data-md-component="source">
  <div class="md-source__icon md-icon">
    
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><!--! Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6m-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3m44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9M244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8M97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1m-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7m32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1m-11.4-14.7c-1.6 1-1.6 3.6 0 5.9s4.3 3.3 5.6 2.3c1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2"/></svg>
  </div>
  <div class="md-source__repository">
    pymanim/htmlwiki
  </div>
</a>
    </div>
  
  <ul class="md-nav__list" data-md-scrollfix>
    
      
      
  
  
  
  
    <li class="md-nav__item">
      <a href="../.." class="md-nav__link">
        
  
  <span class="md-ellipsis">
    简介
  </span>
  

      </a>
    </li>
  

    
      
      
  
  
  
  
    
    
      
        
          
        
      
        
      
    
    
      
      
    
    
    <li class="md-nav__item md-nav__item--nested">
      
        
        
          
        
        <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type="checkbox" id="__nav_2" >
        
          
          
          <div class="md-nav__link md-nav__container">
            <a href="../../0pre/" class="md-nav__link ">
              
  
  <span class="md-ellipsis">
    序
  </span>
  

            </a>
            
              
              <label class="md-nav__link " for="__nav_2" id="__nav_2_label" tabindex="0">
                <span class="md-nav__icon md-icon"></span>
              </label>
            
          </div>
        
        <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_2_label" aria-expanded="false">
          <label class="md-nav__title" for="__nav_2">
            <span class="md-nav__icon md-icon"></span>
            序
          </label>
          <ul class="md-nav__list" data-md-scrollfix>
            
              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../../0pre/how/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    0.1 &nbsp; 如何呈现
  </span>
  

      </a>
    </li>
  

              
            
          </ul>
        </nav>
      
    </li>
  

    
      
      
  
  
    
  
  
  
    
    
      
        
          
        
      
        
      
    
    
      
        
        
      
      
    
    
    <li class="md-nav__item md-nav__item--active md-nav__item--section md-nav__item--nested">
      
        
        
        <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_3" checked>
        
          
          
          <div class="md-nav__link md-nav__container">
            <a href="../" class="md-nav__link ">
              
  
  <span class="md-ellipsis">
    html简介
  </span>
  

            </a>
            
              
              <label class="md-nav__link " for="__nav_3" id="__nav_3_label" tabindex="">
                <span class="md-nav__icon md-icon"></span>
              </label>
            
          </div>
        
        <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_3_label" aria-expanded="true">
          <label class="md-nav__title" for="__nav_3">
            <span class="md-nav__icon md-icon"></span>
            html简介
          </label>
          <ul class="md-nav__list" data-md-scrollfix>
            
              
            
              
                
  
  
    
  
  
  
    <li class="md-nav__item md-nav__item--active">
      
      <input class="md-nav__toggle md-toggle" type="checkbox" id="__toc">
      
      
        
      
      
        <label class="md-nav__link md-nav__link--active" for="__toc">
          
  
  <span class="md-ellipsis">
    1.1 &nbsp; 简介
  </span>
  

          <span class="md-nav__icon md-icon"></span>
        </label>
      
      <a href="./" class="md-nav__link md-nav__link--active">
        
  
  <span class="md-ellipsis">
    1.1 &nbsp; 简介
  </span>
  

      </a>
      
        

<nav class="md-nav md-nav--secondary" aria-label="目录">
  
  
  
    
  
  
    <label class="md-nav__title" for="__toc">
      <span class="md-nav__icon md-icon"></span>
      目录
    </label>
    <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
      
        <li class="md-nav__item">
  <a href="#_2" class="md-nav__link">
    <span class="md-ellipsis">
      由来
    </span>
  </a>
  
    <nav class="md-nav" aria-label="由来">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#_3" class="md-nav__link">
    <span class="md-ellipsis">
      定义
    </span>
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
      
        <li class="md-nav__item">
  <a href="#_4" class="md-nav__link">
    <span class="md-ellipsis">
      历史
    </span>
  </a>
  
    <nav class="md-nav" aria-label="历史">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#_5" class="md-nav__link">
    <span class="md-ellipsis">
      发展
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#html" class="md-nav__link">
    <span class="md-ellipsis">
      HTML版本
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#xml" class="md-nav__link">
    <span class="md-ellipsis">
      XML
    </span>
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
      
    </ul>
  
</nav>
      
    </li>
  

              
            
          </ul>
        </nav>
      
    </li>
  

    
  </ul>
</nav>
                  </div>
                </div>
              </div>
            
            
              
              <div class="md-sidebar md-sidebar--secondary" data-md-component="sidebar" data-md-type="toc" >
                <div class="md-sidebar__scrollwrap">
                  <div class="md-sidebar__inner">
                    

<nav class="md-nav md-nav--secondary" aria-label="目录">
  
  
  
    
  
  
    <label class="md-nav__title" for="__toc">
      <span class="md-nav__icon md-icon"></span>
      目录
    </label>
    <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
      
        <li class="md-nav__item">
  <a href="#_2" class="md-nav__link">
    <span class="md-ellipsis">
      由来
    </span>
  </a>
  
    <nav class="md-nav" aria-label="由来">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#_3" class="md-nav__link">
    <span class="md-ellipsis">
      定义
    </span>
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
      
        <li class="md-nav__item">
  <a href="#_4" class="md-nav__link">
    <span class="md-ellipsis">
      历史
    </span>
  </a>
  
    <nav class="md-nav" aria-label="历史">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#_5" class="md-nav__link">
    <span class="md-ellipsis">
      发展
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#html" class="md-nav__link">
    <span class="md-ellipsis">
      HTML版本
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#xml" class="md-nav__link">
    <span class="md-ellipsis">
      XML
    </span>
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
      
    </ul>
  
</nav>
                  </div>
                </div>
              </div>
            
          
          
            <div class="md-content" data-md-component="content">
              <article class="md-content__inner md-typeset">
                
                  

  
    <a href="https://github.com/pymanim/htmlwiki/tree/main/docs/1intro/introduction.md" title="编辑此页" class="md-content__button md-icon">
      
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M441 58.9 453.1 71c9.4 9.4 9.4 24.6 0 33.9L424 134.1 377.9 88 407 58.9c9.4-9.4 24.6-9.4 33.9 0zM209.8 256.2 344 121.9l46.1 46.1-134.3 134.2c-2.9 2.9-6.5 5-10.4 6.1L186.9 325l16.7-58.5c1.1-3.9 3.2-7.5 6.1-10.4zM373.1 25 175.8 222.2c-8.7 8.7-15 19.4-18.3 31.1l-28.6 100c-2.4 8.4-.1 17.4 6.1 23.6s15.2 8.5 23.6 6.1l100-28.6c11.8-3.4 22.5-9.7 31.1-18.3L487 138.9c28.1-28.1 28.1-73.7 0-101.8L474.9 25c-28.1-28.1-73.7-28.1-101.8 0M88 64c-48.6 0-88 39.4-88 88v272c0 48.6 39.4 88 88 88h272c48.6 0 88-39.4 88-88V312c0-13.3-10.7-24-24-24s-24 10.7-24 24v112c0 22.1-17.9 40-40 40H88c-22.1 0-40-17.9-40-40V152c0-22.1 17.9-40 40-40h112c13.3 0 24-10.7 24-24s-10.7-24-24-24z"/></svg>
    </a>
  
  


<h1 id="_1">简介<a class="headerlink" href="#_1" title="Permanent link">&para;</a></h1>
<h2 id="_2">由来<a class="headerlink" href="#_2" title="Permanent link">&para;</a></h2>
<p>HTML的英文全称是 Hyper Text Markup Language，即<a href="https://baike.baidu.com/item/超文本/2832422?fromModule=lemma_inlink">超文本</a>标记语言。HTML是由<a href="https://baike.baidu.com/item/Web/150564?fromModule=lemma_inlink">Web</a>的发明者 <a href="https://baike.baidu.com/item/Tim Berners-Lee/1836386?fromModule=lemma_inlink">Tim Berners-Lee</a>和同事 <a href="https://baike.baidu.com/item/Daniel W./18805823?fromModule=lemma_inlink">Daniel W.</a> Connolly于1990年创立的一种<a href="https://baike.baidu.com/item/标记语言/5964436?fromModule=lemma_inlink">标记语言</a>，它是标准通用化标记语言<a href="https://baike.baidu.com/item/SGML/2901416?fromModule=lemma_inlink">SGML</a>的应用。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台(如<a href="https://baike.baidu.com/item/UNIX/219943?fromModule=lemma_inlink">UNIX</a>， <a href="https://baike.baidu.com/item/Windows/165458?fromModule=lemma_inlink">Windows</a>等)。使用HTML，将所需要表达的信息按某种规则写成<a href="https://baike.baidu.com/item/HTML文件/7176861?fromModule=lemma_inlink">HTML文件</a>，通过专用的<a href="https://baike.baidu.com/item/浏览器/213911?fromModule=lemma_inlink">浏览器</a>来识别，并将这些HTML文件“翻译”成可以识别的信息，即最终呈现的网页。 [2]</p>
<p>自1990年以来，HTML就一直被用作<a href="https://baike.baidu.com/item/万维网/215515?fromModule=lemma_inlink">万维网</a>的<a href="https://baike.baidu.com/item/信息表示/53816400?fromModule=lemma_inlink">信息表示</a>语言，使用HTML描述的文件需要通过web浏览器显示出效果。HTML是一种建立网页文件的语言，通过标记式的指令(Tag)，将文字，图形、动画、声音、表格、链接、影像等内容显示出来。事实上，每一个HTML文档都是一种静态的网页文件，这个文件里面包含了HTML<a href="https://baike.baidu.com/item/指令代码/56540352?fromModule=lemma_inlink">指令代码</a>，这些指令代码并不是一种<a href="https://baike.baidu.com/item/程序语言/10696489?fromModule=lemma_inlink">程序语言</a>，只是一种排版网页中资料显示位置的标记结构语言，易学易懂，非常简单。HTML的普遍应用就是带来了超文本的技术―通过单击鼠标从一个主题跳转到另一个主题，从一个页面跳转到另一个页面，与世界各地主机的文件链接<a href="https://baike.baidu.com/item/超文本传输协议/8535513?fromModule=lemma_inlink">超文本传输协议</a>规定了浏览器在运行HTML文档时所遵循的规则和进行的操作。<a href="https://baike.baidu.com/item/HTTP/243074?fromModule=lemma_inlink">HTTP</a>的制定使浏览器在运行超文本时有了统一的规则和标准。 [2]</p>
<p><a href="https://baike.baidu.com/item/万维网/0?fromModule=lemma_inlink">万维网</a>（world wide web，简称<a href="https://baike.baidu.com/item/www/109924?fromModule=lemma_inlink">www</a>）上的一个<a href="https://baike.baidu.com/item/超媒体/1750647?fromModule=lemma_inlink">超媒体</a>文档称之为一个页面（外语：page）。作为一个组织或者个人在<a href="https://baike.baidu.com/item/万维网/215515?fromModule=lemma_inlink">万维网</a>上放置开始点的页面称为主页（外语：Homepage）或首页，主页中通常包括有指向其他相关页面或其他节点的指针（<a href="https://baike.baidu.com/item/超级链接/313121?fromModule=lemma_inlink">超级链接</a>），所谓超级链接，就是一种<a href="https://baike.baidu.com/item/统一资源定位器/7682460?fromModule=lemma_inlink">统一资源定位器</a>（Uniform Resource Locator，外语缩写：<a href="https://baike.baidu.com/item/URL/0?fromModule=lemma_inlink">URL</a>）指针，通过激活（点击）它，可使<a href="https://baike.baidu.com/item/浏览器/213911?fromModule=lemma_inlink">浏览器</a>方便地获取新的网页。这也是HTML获得广泛应用的最重要的原因之一。在逻辑上将视为一个整体的一系列页面的有机集合称为<a href="https://baike.baidu.com/item/网站/155722?fromModule=lemma_inlink">网站</a>（Website或Site）。超文本标记语言（英文缩写：HTML）是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种<a href="https://baike.baidu.com/item/标记语言/0?fromModule=lemma_inlink">标记语言</a>。 [3]</p>
<p>网页的本质就是超文本<a href="https://baike.baidu.com/item/标记语言/5964436?fromModule=lemma_inlink">标记语言</a>，通过结合使用其他的<a href="https://baike.baidu.com/item/Web技术/7115590?fromModule=lemma_inlink">Web技术</a>（如：<a href="https://baike.baidu.com/item/脚本语言/1379708?fromModule=lemma_inlink">脚本语言</a>、<a href="https://baike.baidu.com/item/公共网关接口/10911997?fromModule=lemma_inlink">公共网关接口</a>、组件等），可以创造出功能强大的网页。因而，超文本标记语言是万维网（<a href="https://baike.baidu.com/item/Web/150564?fromModule=lemma_inlink">Web</a>）编程的基础，也就是说万维网是建立在超文本基础之上的。超文本标记语言之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。 [4]</p>
<h3 id="_3">定义<a class="headerlink" href="#_3" title="Permanent link">&para;</a></h3>
<p>超文本标记语言是<a href="https://baike.baidu.com/item/标准通用标记语言/6805073?fromModule=lemma_inlink">标准通用标记语言</a>下的一个应用，也是一种规范，一种标准，它通过<a href="https://baike.baidu.com/item/标记符号/3666546?fromModule=lemma_inlink">标记符号</a>来标记要显示的网页中的各个部分。网页文件本身是一种<a href="https://baike.baidu.com/item/文本文件/747597?fromModule=lemma_inlink">文本文件</a>，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其<a href="https://baike.baidu.com/item/解释执行/8081777?fromModule=lemma_inlink">解释执行</a>过程，编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是，对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果。 [3]</p>
<h2 id="_4">历史<a class="headerlink" href="#_4" title="Permanent link">&para;</a></h2>
<h3 id="_5">发展<a class="headerlink" href="#_5" title="Permanent link">&para;</a></h3>
<p>1980年，物理学家蒂姆·伯纳斯-李在欧洲核子研究中心（CERN）在承包工程期间，为使CERN的研究人员使用并共享文档，他提出并创建原型系统ENQUIRE。1989年，伯纳斯-李在一份备忘录中提出一个基于互联网的超文本系统。他规定HTML并在1990年底写出浏览器和服务器软件。同年，伯纳斯-李与CERN的数据系统工程师罗伯特·卡里奥联合为项目申请资助，但未被CERN正式批准。在他的个人笔记中 [13]伯纳斯-李列举“一些使用超文本的领域”，并把百科全书列为首位 [14]。</p>
<p>HTML的首个公开描述出现于一个名为HTML Tags [15]的文件中，由蒂姆·伯纳斯-李于1991年底提及 [16-17]。它描述18个元素，包括HTML初始的、相对简单的设计。除了超链接标签外，其他设计都深受CERN内部一个以标准通用标记语言（SGML）为基础的文件格式SGMLguid的影响。这些元素仍有11个存在于HTML 4中 [18]。</p>
<h3 id="html">HTML版本<a class="headerlink" href="#html" title="Permanent link">&para;</a></h3>
<p>HTML是用来标记Web信息如何展示以及其他特性的一种<a href="https://baike.baidu.com/item/语法规则/1095093?fromModule=lemma_inlink">语法规则</a>，它最初于1989年由<a href="https://baike.baidu.com/item/CERN/1773904?fromModule=lemma_inlink">CERN</a>的Tim Berners-Lee发明。HTML基于更古老一些的语言SGML定义，并简化了其中的语言元素。这些元素用于告诉浏览器如何在用户的屏幕上展示数据，所以很早就得到各个<a href="https://baike.baidu.com/item/Web浏览器/3740630?fromModule=lemma_inlink">Web浏览器</a>厂商的支持。 [5]</p>
<p>HTML历史上有如下版本： [5]</p>
<p>①HTML 1.0：在1993年6月作为<a href="https://baike.baidu.com/item/互联网工程工作小组/6992977?fromModule=lemma_inlink">互联网工程工作小组</a>(<a href="https://baike.baidu.com/item/IETF/2800318?fromModule=lemma_inlink">IETF</a>)工作草案发布。 [5]</p>
<p>②<a href="https://baike.baidu.com/item/HTML 2.0/53770478?fromModule=lemma_inlink">HTML 2.0</a>：1995年1 1月作为<a href="https://baike.baidu.com/item/RFC/1840?fromModule=lemma_inlink">RFC</a> 1866发布，于2000年6月发布之后被宣布已经过时。 [5]</p>
<p>③HTML 3.2：1997年1月14日，W3C推荐标准。 [5]</p>
<p>④HTML 4.0：1997年12月18日，W3C推荐标准。 [5]</p>
<p>⑤<a href="https://baike.baidu.com/item/HTML 4.01/53770481?fromModule=lemma_inlink">HTML 4.01</a>（微小改进）：1999年12月24日，W3C推荐标准。 [5]</p>
<p>⑥HTML 5：<a href="https://baike.baidu.com/item/HTML5/4234903?fromModule=lemma_inlink">HTML5</a>是公认的下一代Web语言，极大地提升了Web在<a href="https://baike.baidu.com/item/富媒体/3331198?fromModule=lemma_inlink">富媒体</a>、富内容和富应用等方面的能力，被喻为终将改变<a href="https://baike.baidu.com/item/移动互联网/7837035?fromModule=lemma_inlink">移动互联网</a>的重要推手。<a href="https://baike.baidu.com/item/Internet Explorer 8/950664?fromModule=lemma_inlink">Internet Explorer 8</a>及以前的版本不支持。 [6]</p>
<p>HTML在Web迅猛发展的过程中起着重要作用，有着重要的地位。但随着<a href="https://baike.baidu.com/item/网络应用/2196523?fromModule=lemma_inlink">网络应用</a>的深入，特别是电子商务的应用，HTML过于简单的缺陷很快凸现出来：HTML不可扩展。HTML不允许<a href="https://baike.baidu.com/item/应用程序/5985445?fromModule=lemma_inlink">应用程序</a>开发者为具体的应用环境定义自定义的标记。HTML只能用于<a href="https://baike.baidu.com/item/信息显示/16148476?fromModule=lemma_inlink">信息显示</a>。HTML可以设置文本和图片<a href="https://baike.baidu.com/item/显示方式/12724842?fromModule=lemma_inlink">显示方式</a>，但没有<a href="https://baike.baidu.com/item/语义结构/649813?fromModule=lemma_inlink">语义结构</a>，即HTML<a href="https://baike.baidu.com/item/显示数据/56365927?fromModule=lemma_inlink">显示数据</a>是按照布局而非语义的。随着网络应用的发展，各行业对信息有着不同的需求，这些不同类型的信息未必都是以网页的形式显示出来。例如，当通过<a href="https://baike.baidu.com/item/搜索引擎/104812?fromModule=lemma_inlink">搜索引擎</a>进行数据搜索时，按照语义而非按照布局来显示数据会具有更多的优点。</p>
<p>总而言之，HTML的缺点使其<a href="https://baike.baidu.com/item/交互性/10758528?fromModule=lemma_inlink">交互性</a>差，语义模糊，这些缺陷难以适应Internet飞速发展的要求，因此一个标准、简洁、结构严谨以及可高度扩展的XML就产生了。</p>
<h3 id="xml">XML<a class="headerlink" href="#xml" title="Permanent link">&para;</a></h3>
<p><a href="https://baike.baidu.com/item/XHTML/316621?fromModule=lemma_inlink">XHTML</a>是使用XML 1.0改写自HTML 4.01的独立语言。它不再被作为单独标准开发。</p>
<p>undefined XHTML 1.0 [19]， 2000年1月26日作为W3C推荐标准发布。修订版于2002年8月1日发布，它提供与HTML 4.0和4.01相同的三个变化，这些变化被重新在XML中制定。</p>
<p>undefined XHTML 1.1 [20]，基于XHTML 1.0 严格版，2001年5月31日 作为W3C推荐标准发布。修订版可使用模块化XHTML（页面存档备份，存于互联网档案馆）的模块，2001年4月10日作为W3C推荐标准发布。</p>
<p>undefined XHTML 2.0为工作草案，但为支持HTML5与XHTML5的工作，此草案被放弃 [21-23]。 XHTML 2.0与XHTML 1.x不兼容，因此更确切的说这是一个XHTML风格的新语言而不是XHTML 1.x的更新。</p>
<p>undefined 在HTML5草案中规定一个XHTML语法，称为“XHTML5.1” [24]。</p>












                
              </article>
            </div>
          
          
  <script>var tabs=__md_get("__tabs");if(Array.isArray(tabs))e:for(var set of document.querySelectorAll(".tabbed-set")){var labels=set.querySelector(".tabbed-labels");for(var tab of tabs)for(var label of labels.getElementsByTagName("label"))if(label.innerText.trim()===tab){var input=document.getElementById(label.htmlFor);input.checked=!0;continue e}}</script>

<script>var target=document.getElementById(location.hash.slice(1));target&&target.name&&(target.checked=target.name.startsWith("__tabbed_"))</script>
        </div>
        
          <button type="button" class="md-top md-icon" data-md-component="top" hidden>
  
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13 20h-2V8l-5.5 5.5-1.42-1.42L12 4.16l7.92 7.92-1.42 1.42L13 8z"/></svg>
  回到页面顶部
</button>
        
      </main>
      
        <footer class="md-footer">
  
    
      
      <nav class="md-footer__inner md-grid" aria-label="页脚" >
        
          
          <a href="../" class="md-footer__link md-footer__link--prev" aria-label="上一页: 1.1 &amp;nbsp; html概述">
            <div class="md-footer__button md-icon">
              
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11z"/></svg>
            </div>
            <div class="md-footer__title">
              <span class="md-footer__direction">
                上一页
              </span>
              <div class="md-ellipsis">
                1.1 &nbsp; html概述
              </div>
            </div>
          </a>
        
        
      </nav>
    
  
  <div class="md-footer-meta md-typeset">
    <div class="md-footer-meta__inner md-grid">
      <div class="md-copyright">
  
    <div class="md-copyright__highlight">
      Copyright &copy; 2024 wanwusangzhi<br>my website is at <a href="http://www.wanwusangzhi.top">web</a>
    </div>
  
  
    Made with
    <a href="https://squidfunk.github.io/mkdocs-material/" target="_blank" rel="noopener">
      Material for MkDocs
    </a>
  
</div>
      
    </div>
  </div>
</footer>
      
    </div>
    <div class="md-dialog" data-md-component="dialog">
      <div class="md-dialog__inner md-typeset"></div>
    </div>
    
    
    <script id="__config" type="application/json">{"base": "../..", "features": ["navigation.tabs", "navigation.indexes", "navigation.expand", "announce.dismiss", "content.action.edit", "content.code.annotate", "content.code.copy", "content.tabs.link", "content.tooltips", "navigation.indexes", "navigation.top", "navigation.footer", "navigation.tracking", "search.highlight", "search.share", "search.suggest", "toc.follow"], "search": "../../assets/javascripts/workers/search.6ce7567c.min.js", "translations": {"clipboard.copied": "\u5df2\u590d\u5236", "clipboard.copy": "\u590d\u5236", "search.result.more.one": "\u5728\u8be5\u9875\u4e0a\u8fd8\u6709 1 \u4e2a\u7b26\u5408\u6761\u4ef6\u7684\u7ed3\u679c", "search.result.more.other": "\u5728\u8be5\u9875\u4e0a\u8fd8\u6709 # \u4e2a\u7b26\u5408\u6761\u4ef6\u7684\u7ed3\u679c", "search.result.none": "\u6ca1\u6709\u627e\u5230\u7b26\u5408\u6761\u4ef6\u7684\u7ed3\u679c", "search.result.one": "\u627e\u5230 1 \u4e2a\u7b26\u5408\u6761\u4ef6\u7684\u7ed3\u679c", "search.result.other": "# \u4e2a\u7b26\u5408\u6761\u4ef6\u7684\u7ed3\u679c", "search.result.placeholder": "\u952e\u5165\u4ee5\u5f00\u59cb\u641c\u7d22", "search.result.term.missing": "\u7f3a\u5c11", "select.version": "\u9009\u62e9\u5f53\u524d\u7248\u672c"}}</script>
    
    
      <script src="../../assets/javascripts/bundle.83f73b43.min.js"></script>
      
    
  <script id="init-glightbox">const lightbox = GLightbox({"touchNavigation": true, "loop": false, "zoomable": true, "draggable": false, "openEffect": "zoom", "closeEffect": "zoom", "slideEffect": "none"});
document$.subscribe(() => { lightbox.reload() });
</script></body>
</html>